<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单from
        action：表单提交的位置，可以是交给一个网址，也可以是交给一个请求处理地址
        method：post get请求方式
        get方法提交，我们可以在url中看到我们提交的信息，不安全高效
        post:比较安全，传输大文件-->
<form action="1.我的第一个网页.html" method="get">
    <!--文本输入框：input type="text"-->
    <p>用户名：<input type="text" name="username" value="请输入用户名" maxlength="10" size="20"></p>
    <p>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" placeholder="请输入密码"></p>
    <!--    radio单选框标签 value即单选框的值，在提交时对应value
    name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
    checked:默认被选中
    -->
    <p>性别：<input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <p>爱好：
        <input type="checkbox" value="b" name="hobby">睡觉
        <input type="checkbox" value="s" name="hobby" checked>打篮球
        <input type="checkbox" value="d" name="hobby">玩游戏
    </p>
    <p><input type="button" name="btn1" value="按钮上文字"><!--按钮-->

        <input type="image" src="../resources/img/test1.png" height="15px" width="15px"><!--图片按钮默认是提交：和submit类似-->
    </p>

    <p><!--下拉框：selected:默认选项-->
        你来自：
        <select name="location">
            <option value="china">中国</option>
            <option value="us" selected>美国</option>
            <option value="japan">日本</option>
        </select>
    </p>

    <p><!--文本域-->
        反馈：
        <textarea name="textarea" id="10" cols="30" rows="10" >文本内容</textarea>
    </p>

    <p><!--文件域-->
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>
    <!--邮件：会简单验证是否是邮箱地址
		url：会简单验证是否是网络地址
        number：数字验证-->
    <p>邮箱：<input type="email" name="email">
        url：<input type="url"></p>

    <!--数字验证
           max最大数量
           min 最小数量
           step 每次点击增加或减少的数量-->
    <p>商品数量<input type="number" name="num" max="100" min="1" step="1"></p>
    <!--滑块-->
    <p>音量：<input type="range" min="0" max="100" name="voice" step="2"></p>
    <!--搜索框-->
    <p>搜索：<input type="search" name="search"></p>

    <p><!--增强鼠标可用性-->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

    <!--    submit提交表单，reset清空-->
    <p><input type="submit"> <input type="reset">
    </p>

</form>
</body>
</html>
